<template>
  <div class="index">
    <!-- 团建页面 主体显示部分 -->
    <div class="main">
      <!-- 推荐动态分享 -->
      <div class="one-feed" v-for="i in 3" :key="i">
        <nuxt-link :to="{ name: 'feed-id', params: { id: 123 } }">
          <!-- 用户信息 -->
          <div class="user">
            <img src="../assets/images/icons/icon_head_default.png" alt="PIC" />
            <div class="info">
              <h2 class="name">crystal</h2>
              <p class="date">
                1小时前 | 来自 <span class="device">Flexpai2</span>
              </p>
            </div>
          </div>
          <!-- 标题信息 -->
          <div class="title">
            <span class="type up">置顶</span>
            <span class="type hot">精</span>
            <h2>文章标题文章标题</h2>
          </div>
          <!-- 内容详情 -->
          <div class="contents">
            手机屏幕该如何发展，谁都没有定论，不过现在折叠似乎是众多厂商乐于探索的方向。国内厂商柔宇科技就已经发布了全球首款折叠屏手机FlexPai，使用了自主研发的第二代蝉翼全柔性屏幕。
          </div>
          <!-- 图片信息 -->
          <div class="pics">
            <img
              src="https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/4.jpg"
              alt="PIC"
            />
            <img
              src="https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/5.jpg"
              alt="PIC"
            />
            <img
              src="https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/2.jpg"
              alt="PIC"
            />
            <span class="pinfo">
              <img src="../assets/images/icons/icon_pic_number.png" alt="PIC" />
              <span>8 张</span>
            </span>
          </div>
          <!-- 更多信息 -->
          <div class="more">
            <div class="left">
              <div class="topic">
                <span># 探索柔宇星球</span>
              </div>
              <div class="cile">
                <img
                  src="../assets/images/icons/icon_royole_group.png"
                  alt="PIC"
                />
                <span>这是柔宇圈子</span>
              </div>
            </div>
            <div class="right">
              <div class="see">
                <img
                  src="../assets/images/icons/icon_views_normal.png"
                  alt="PIC"
                />
                <span>2341</span>
              </div>
              <div class="msg">
                <img
                  src="../assets/images/icons/icon_comment_normal.png"
                  alt="PIC"
                />
                <span>1546</span>
              </div>
              <div class="like">
                <img
                  src="../assets/images/icons/icon_thumbs_up_normal.png"
                  alt="PIC"
                />
                <span>1078</span>
              </div>
            </div>
          </div>
        </nuxt-link>
      </div>
      <div class="one-feed">
        <nuxt-link :to="{ name: 'feed-id', params: { id: 123 } }">
          <!-- 用户信息 -->
          <div class="user">
            <img src="../assets/images/icons/icon_head_default.png" alt="PIC" />
            <div class="info">
              <h2 class="name">crystal</h2>
              <p class="date">
                1小时前 | 来自 <span class="device">Flexpai2</span>
              </p>
            </div>
          </div>
          <!-- 标题信息 -->
          <div class="title">
            <span class="type up">置顶</span>
            <span class="type hot">精</span>
            <h2>文章标题文章标题</h2>
          </div>
          <!-- 内容详情 -->
          <div class="contents">
            手机屏幕该如何发展，谁都没有定论，不过现在折叠似乎是众多厂商乐于探索的方向。国内厂商柔宇科技就已经发布了全球首款折叠屏手机FlexPai，使用了自主研发的第二代蝉翼全柔性屏幕。
          </div>
          <!-- 图片信息 -->
          <div
            class="video-box"
            :style="{
              backgroundImage:
                'url(https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/2.jpg)',
            }"
          >
            <img src="../assets/images/icons/icon_video_play.png" alt="PLAY" />
          </div>
          <!-- 更多信息 -->
          <div class="more">
            <div class="left">
              <div class="topic">
                <span># 探索柔宇星球</span>
              </div>
              <div class="cile">
                <img
                  src="../assets/images/icons/icon_royole_group.png"
                  alt="PIC"
                />
                <span>这是柔宇圈子</span>
              </div>
            </div>
            <div class="right">
              <div class="see">
                <img
                  src="../assets/images/icons/icon_views_normal.png"
                  alt="PIC"
                />
                <span>2341</span>
              </div>
              <div class="msg">
                <img
                  src="../assets/images/icons/icon_comment_normal.png"
                  alt="PIC"
                />
                <span>1546</span>
              </div>
              <div class="like">
                <img
                  src="../assets/images/icons/icon_thumbs_up_normal.png"
                  alt="PIC"
                />
                <span>1078</span>
              </div>
            </div>
          </div>
        </nuxt-link>
      </div>
      <!-- 推进资讯长文章 -->
      <div class="one-post" v-for="i in 3" :key="i + 100">
        <nuxt-link :to="{ name: 'info-id', params: { id: 123 } }">
          <!-- 用户信息 -->
          <div class="user">
            <img src="../assets/images/icons/icon_head_default.png" alt="PIC" />
            <div class="info">
              <h2 class="name">crystal</h2>
              <p class="date">
                1小时前 | 来自 <span class="device">Flexpai2</span>
              </p>
            </div>
          </div>
          <!-- 封面及内容信息 -->
          <div class="content">
            <img
              src="https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/1.jpg"
              alt="PIC"
            />
            <div class="info">
              <h2>文章标题-长文章带封面图</h2>
              <p>
                手机屏幕该如何发展，谁都没有定论，不过现在折叠似乎是众多厂商乐于探索的方向。国内厂商柔宇科技就已经发布了全球首款折叠屏手机FlexPai，使用了自主研发的第二代蝉翼全柔性屏幕。
              </p>
            </div>
          </div>
          <!-- 更多信息 -->
          <div class="more">
            <div class="left">
              <div class="topic">
                <span># 探索柔宇星球</span>
              </div>
              <div class="cile">
                <img
                  src="../assets/images/icons/icon_royole_group.png"
                  alt="PIC"
                />
                <span>这是柔宇圈子</span>
              </div>
            </div>
            <div class="right">
              <div class="see">
                <img
                  src="../assets/images/icons/icon_views_normal.png"
                  alt="PIC"
                />
                <span>2341</span>
              </div>
              <div class="msg">
                <img
                  src="../assets/images/icons/icon_comment_normal.png"
                  alt="PIC"
                />
                <span>1546</span>
              </div>
              <div class="like">
                <img
                  src="../assets/images/icons/icon_thumbs_up_normal.png"
                  alt="PIC"
                />
                <span>1078</span>
              </div>
            </div>
          </div>
        </nuxt-link>
      </div>
    </div>
    <!-- 发布按钮相关显示部分 -->
    <div class="btns" v-if="loginState">
      <h2>发表</h2>
      <div class="items">
        <nuxt-link to="/publish/movement">
          <div class="item">
            <img src="../assets/images/icons/icon_moments_big.png" alt="Feed" />
            <div class="title">动态</div>
          </div>
        </nuxt-link>
        <nuxt-link to="/cms/editor/article">
          <div class="item">
            <img src="../assets/images/icons/icon_article_big.png" alt="Feed" />
            <div class="title">文章</div>
          </div>
        </nuxt-link>
        <nuxt-link to="/publish/question">
          <div class="item">
            <img
              src="../assets/images/icons/icon_question_big.png"
              alt="Feed"
            />
            <div class="title">提问</div>
          </div>
        </nuxt-link>
        <nuxt-link to="/cms/editor/video">
          <div class="item">
            <img src="../assets/images/icons/icon_video_big.png" alt="Feed" />
            <div class="title">小视频</div>
          </div>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['loginState']),
  },
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: content-box;
}
.index {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  .main {
    width: 760px;
    background-color: #fff;
    padding: 5px 28px 28px 28px;
    // 顶部用户信息样式是一致性的
    .user {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      margin-top: 30px;
      img {
        width: 40px;
        height: 40px;
      }
      .info {
        margin-left: 10px;
        .name {
          font-family: SourceHanSansSC-Medium;
          font-size: 14px;
          color: #000000;
          font-weight: 500;
          margin-top: 2px;
        }
        .date {
          opacity: 0.4;
          font-family: SourceHanSansSC-Normal;
          font-size: 0.1rem;
          color: #000000;
          line-height: 15px;
          font-weight: 400;
          margin-top: 2px;
          .device {
            font-family: Gotham-Book;
            font-size: 0.1rem;
            line-height: 15px;
            font-weight: 300;
          }
        }
      }
    }
    // 底部 info 信息是一致性的
    .more {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .left,
      .right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
      }
      .topic,
      .cile {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        background-color: rgba($color: #0050ff, $alpha: 0.1);
        border-radius: 12px;
        padding: 2px 10px;
        margin-right: 10px;
        span {
          opacity: 0.6;
          font-family: SourceHanSansSC-Medium;
          font-size: 12px;
          color: #0050ff;
          font-weight: 500;
        }
      }
      .cile {
        background-color: rgba($color: #ff6e00, $alpha: 0.1);
        img {
          width: 14px;
          height: 14px;
          margin-right: 3px;
        }
        span {
          color: #ff6e00;
        }
      }
      .see,
      .msg,
      .like {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;
        img {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
        span {
          opacity: 0.6;
          font-family: Gotham-Book;
          font-size: 14px;
          color: #000000;
          font-weight: 300;
        }
      }
    }
    // 动态推荐样式
    .one-feed {
      padding-bottom: 30px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
      .title {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-top: 15px;
        margin-bottom: 15px;
        .type {
          border-radius: 3px;
          font-family: SourceHanSansSC-Medium;
          font-size: 12px;
          color: #ffffff;
          font-weight: 500;
          padding: 1px 8px;
          margin-right: 10px;
          &.up {
            background: #0050ff;
          }
          &.hot {
            background: #eb2d4b;
          }
        }
        h2 {
          font-family: SourceHanSansSC-Medium;
          font-size: 16px;
          color: #000000;
          font-weight: 500;
        }
      }
      .contents {
        font-family: SourceHanSansSC-Regular;
        font-size: 16px;
        color: #000000;
        font-weight: 400;
        line-height: 26px;
      }
      .pics {
        width: 760px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        position: relative;
        img {
          width: 245px;
          height: 135px;
          border-radius: 4px;
        }
        .pinfo {
          position: absolute;
          right: 8px;
          bottom: 8px;
          width: 67px;
          height: 30px;
          background-color: rgba($color: #000000, $alpha: 0.88);
          border-radius: 3px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            border-radius: 0;
            margin-right: 5px;
          }
          span {
            font-family: SourceHanSansSC-Normal;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
            font-weight: 400;
          }
        }
      }
      .video-box {
        width: 245px;
        height: 300px;
        background-size: cover;
        border-radius: 8px;
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    // 资讯样式
    .one-post {
      padding-bottom: 30px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        img {
          width: 245px;
          height: 135px;
          border-radius: 4px;
        }
        .info {
          width: 490px;
          h2 {
            font-family: SourceHanSansSC-Medium;
            font-size: 16px;
            color: #000000;
            font-weight: 500;
            margin-bottom: 8px;
          }
          p {
            font-family: SourceHanSansSC-Regular;
            font-size: 16px;
            color: #000000;
            font-weight: 400;
            line-height: 26px;
          }
        }
      }
    }
  }
  .btns {
    width: 300px;
    padding: 28px;
    background-color: #fff;
    margin-left: 20px;
    h2 {
      font-family: SourceHanSansSC-Medium;
      font-size: 16px;
      color: #000000;
      font-weight: 500;
    }
    .items {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      margin-top: -20px;
      .item {
        width: 120px;
        margin-top: 40px;
        text-align: center;
        cursor: pointer;
        img {
          width: 80px;
          height: 80px;
        }
        .title {
          font-family: SourceHanSansSC-Regular;
          font-size: 14px;
          color: #000000;
          font-weight: 400;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
